<template>
  <div class="news-detail">
    <!-- 标题区域 -->
    <div class="header">
      <div class="back" @click="$router.back()">
        <i class="el-icon-arrow-left"></i>
      </div>
      <span>新闻详情</span>
    </div>

    <!-- 内容区域 -->
    <div class="content-area">
      <div class="title">{{ newsDetail.title }}</div>
      
      <div class="info-bar">
        <span class="date">{{ formatNewsDate(newsDetail.publishTime) }}</span>
        <span class="source" v-if="newsDetail.source">
          来源：<a :href="newsDetail.source" target="_blank">{{ getSourceName(newsDetail.source) }}</a>
        </span>
      </div>

      <!-- 图片区域 -->
      <div class="image-area" v-if="newsDetail.imageUrl">
        <img 
          :src="newsDetail.imageUrl" 
          :onerror="defaultNewsImg"
          alt="新闻图片"
        />
      </div>

      <!-- 正文区域 -->
      <div class="content" v-html="formatContent(newsDetail.content)"></div>

      <!-- 底部数据 -->
      <div class="stats-bar">
        <div class="stat-item">
          <i class="el-icon-view"></i>
          <span>{{ newsDetail.heatValue || 0 }}</span>
        </div>
        <div class="stat-item" @click="handleLike">
          <i :class="['el-icon-thumb', {'is-liked': newsDetail.isLiked}]"></i>
          <span>{{ newsDetail.likeCount || 0 }}</span>
        </div>
        <div class="stat-item" @click="handleCollect">
          <i :class="['el-icon-star-off', {'is-collected': newsDetail.isCollected}]"></i>
          <span>{{ newsDetail.collectionCount || 0 }}</span>
        </div>
        <div class="stat-item">
          <i class="el-icon-share"></i>
          <span>{{ newsDetail.forwardCount || 0 }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getNewsDetail, newsCollect, newsLike } from "@/api/api";

export default {
  name: 'NewsDetail',
  data() {
    return {
      newsDetail: {},
      defaultNewsImg: 'this.src="' + require("@/assets/img/news_default.png") + '"'
    };
  },
  created() {
    this.loadNewsDetail();
  },
  methods: {
    async loadNewsDetail() {
      try {
        const res = await getNewsDetail({
          id: this.$route.query.id
        });
        
        if (res.code === 200) {
          this.newsDetail = res.data || {};
        }
      } catch (error) {
        console.error('获取新闻详情失败:', error);
        this.$message.error('获取新闻详情失败');
      }
    },
    
    formatNewsDate(date) {
      if (!date) return '';
      const dt = new Date(date);
      const year = dt.getFullYear();
      const month = String(dt.getMonth() + 1).padStart(2, '0');
      const day = String(dt.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    
    getSourceName(url) {
      if (!url) return '';
      try {
        const urlObj = new URL(url);
        return urlObj.hostname.replace('www.', '');
      } catch (e) {
        return url;
      }
    },
    
    formatContent(content) {
      if (!content) return '';
      return content.replace(/\r\n/g, '<br>');
    },
    
    async handleCollect() {
      try {
        const res = await newsCollect({
          id: this.newsDetail.id,
          isCollect: !this.newsDetail.isCollected
        });
        
        if (res.code === 200) {
          // 更新收藏状态和数量
          this.newsDetail.isCollected = !this.newsDetail.isCollected;
          this.newsDetail.collectionCount += this.newsDetail.isCollected ? 1 : -1;
          
          this.$message({
            type: 'success',
            message: this.newsDetail.isCollected ? '收藏成功' : '取消收藏成功'
          });
        }
      } catch (error) {
        console.error('收藏操作失败:', error);
        this.$message.error('操作失败，请稍后重试');
      }
    },
    
    async handleLike() {
      try {
        const res = await newsLike({
          id: this.newsDetail.id,
          isLike: !this.newsDetail.isLiked
        });
        
        if (res.code === 200) {
          // 更新点赞状态和数量
          this.newsDetail.isLiked = !this.newsDetail.isLiked;
          this.newsDetail.likeCount += this.newsDetail.isLiked ? 1 : -1;
          
          this.$message({
            type: 'success',
            message: this.newsDetail.isLiked ? '点赞成功' : '取消点赞成功'
          });
        }
      } catch (error) {
        console.error('点赞操作失败:', error);
        this.$message.error('操作失败，请稍后重试');
      }
    }
  }
}
</script>

<style lang="less" scoped>
.news-detail {
  min-height: 100vh;
  background: #f5f7fa;

  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 44px;
    background: #fff;
    display: flex;
    align-items: center;
    padding: 0 15px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 100;

    .back {
      padding: 8px;
      margin-left: -8px;
      cursor: pointer;
      
      i {
        font-size: 20px;
        color: #333;
      }
    }

    span {
      flex: 1;
      text-align: center;
      font-size: 16px;
      font-weight: 500;
      margin-right: 28px;
    }
  }

  .content-area {
    margin-top: 44px;
    padding: 20px 15px;
    background: #fff;

    .title {
      font-size: 20px;
      font-weight: bold;
      color: #333;
      line-height: 1.4;
      margin-bottom: 15px;
    }

    .info-bar {
      display: flex;
      gap: 15px;
      color: #999;
      font-size: 13px;
      margin-bottom: 20px;

      .source {
        a {
          color: #1e4b9c;
          text-decoration: none;
          
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }

    .image-area {
      margin-bottom: 20px;
      
      img {
        width: 100%;
        max-height: 300px;
        object-fit: cover;
        border-radius: 4px;
      }
    }

    .content {
      font-size: 15px;
      line-height: 1.8;
      color: #333;
      white-space: pre-wrap;
    }

    .stats-bar {
      margin-top: 30px;
      padding-top: 15px;
      border-top: 1px solid #eee;
      display: flex;
      justify-content: space-around;

      .stat-item {
        display: flex;
        align-items: center;
        gap: 4px;
        color: #666;
        
        i {
          font-size: 16px;
          
          &.is-collected {
            color: #f56c6c;
          }
          
          &.is-liked {
            color: #409eff;
          }
        }
        
        span {
          font-size: 13px;
        }
        
        &:nth-child(2),
        &:nth-child(3) {
          cursor: pointer;
          
          &:hover {
            opacity: 0.8;
          }
          
          &:active {
            opacity: 0.6;
          }
        }
      }
    }
  }
}
</style>


